<template>
    <div id="cc">
        <div id="qq">
            <div id="aa">
                <span class="fa fa-angle-left" @touchstart="back"></span>
            </div>
            <div id="zz">商品详情</div>
            <div id="ww">···</div>
        </div>
        <div id="sa">
            <div class="mose">
                <Swiper :list="imgs" auto loop height="350px"></Swiper>
                <div class="fx">
                    <div>
                        <p id="r1">{{data1.name}}</p>
                        <p id="r2">至尊经典，奢华品质，你值得拥有</p>
                    </div>
                    <div class="tubiao1">
                        <p class="fa fa-star-o" id="r3"></p>
                        <p class="fenxiang">收藏</p>
                    </div>
                </div>
                <p class="price1"><span id="r4">免税价：</span><span id="rmb">￥</span> {{data1.price}} <span class="yoho">有货</span></p>
                <div class="last">
                    <span class="send">快递:包邮</span> <span class="sale">月销147笔</span><span></span>
                </div>
                <div id="second">
                    <div class="first">
                        <span class="all"><span class="prom">促销</span> 全国地区包邮</span> <span class="fa fa-angle-right right"></span>
                    </div>

                    <div class="first">
                        <span class="all"><span class="prom">积分</span> 购买可得积分</span> <span class="fa fa-angle-right right"></span>
                    </div>

                    <div id="thirt">
                        <div class="out"><span class="fa fa-check-square shop"> </span> <span class="text">正品保证</span></div>
                        <div class="out"><span class="fa fa-check-square shop"> </span> <span class="text">七天退换</span></div>
                        <div class="out"><span class="fa fa-check-square shop"> </span> <span class="text">极速退款</span></div>
                    </div>
                </div>
                <div id="kk">
                    <hr>
                    <span class="fa fa-commenting-o" id="commet">评价</span>
                </div>
                <div id="eval">
                    <p id="baby">宝贝评价(1744)</p>
                    <div id="lute">
                        <div class="evalute">宝贝不错(1044)</div>
                        <div class="evalute">快递不错(400)</div>
                        <div class="evalute">包装不错(200)</div>
                        <div class="evalute">质量好(41)</div>
                        <div class="evalute">很便宜(9)</div>
                    </div>
                </div>
            </div>
        </div>
        <TabBar :data1="data1._id" id="dibu"></TabBar>
    </div>
</template>

<script>
    import TabBar from '../components/TabBar.vue'
    import { Swiper } from 'vux';
    export default {
        data: function () {
            return {
                data1: [],
                imgs: []
            }
        },
        computed: {
            str: function () {
                return this.$route.params.abc
            }
        },
        mounted: function () {
            var params = {
                _id: this.str
            }
            this.$store.dispatch("requestOnegood", params)
                .then(res => {
                    // console.log(res.data)
                    this.data1 = res.data.data1;
                    // console.log(this.data1);
                    for (var i = 0; i < this.data1.pics.length; i++) {
                        var a = {
                            img: '/avatar/' + this.data1.pics[i]
                        }
                        this.imgs.push(a);
                    }
                })
        },
        methods: {
            back: function () {
                history.back();
            },

        },
        components: {
            Swiper,
            TabBar
        }
    }

</script>

<style scoped>
    #qq {
        display: flex;
        height: 10vh;
        width: 100vw;
        border-bottom: solid 2px #bbb;
        background-color: white;
    }

    #aa {
        width: 10vh;
        height: 10vh;
        font-size: 8vh;
        text-align: center;
        line-height: 10vh;
        color: #999;
    }

    #zz {
        width: 50vh;
        text-align: center;
        line-height: 10vh;
    }

    #ww {
        width: 10vh;
        height: 10vh;
        font-size: 10vh;
        text-align: center;
        line-height: 10vh;
        color: #999;
    }

    #cc {
        width: 100vw;
        height: 100vh;
        background-color: white;
        overflow-y: hidden;
        position: relative;
    }

    #dibu {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    img {
        width: 25vw;
    }

    #sa {
        height: calc(100vh - 100px);
        overflow-y: scroll;
    }

    #baby {
        font-size: 14px;
        margin-left: 4px;
    }

    #lute {
        display: flex;
        flex-wrap: wrap;
    }

    .evalute {
        text-align: center;
        color: #666;
        border-radius: 4px;
        background-color: #eee;
        font-size: 12px;
        margin: 7px 11px;
    }

    .save {
        font-size: 18px;
        color: #505050;
    }

    p {
        margin: 0;
    }

    #kk {
        position: relative;
    }

    hr {
        width: 50vw;
        margin: 24px auto;
        border: none;
        border-top: 1px solid gray;
    }

    #commet {
        display: block;
        background-color: white;
        width: 20vw;
        text-align: center;
        position: absolute;
        top: -7px;
        left: 40vw;
        color: #999;
    }

    #div1 {
        margin: 27px auto;
        position: relative;
    }

    .cat {
        background-color: #FF3333;
        color: white;
        font-size: 14px;
        border-radius: 4px;
        padding: 0 2px;
    }

    .out {
        margin-left: 5px;
        margin-right: 5vw;
        margin-top: 1vh;
        margin-bottom: 1vh;
    }

    .text {
        font-size: 11px;
        color: #999;
    }

    .shop {

        color: gray;
        font-size: 11px;
        border-radius: 50px;
    }

    #thirt {
        display: flex;
        margin-top: 10px;
        border-top: 1px solid #F8F8F8;
    }

    .right {
        font-size: 20px;
        color: gray;
    }

    .all {
        font-size: 11px;
        display: inline-block;
        color: #999;
    }

    .first {
        margin-left: 5px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
    }

    .prom {
        border: 0.1px solid #CC6633;
        font-size: 10px;
        color: #CC6633;
        border-radius: 4px;
    }

    #second {
        padding-top: 10px;
        background-color: white;
    }

    #bgc {
        background-color: white;
        padding-bottom: 10px;
    }

    .sale,
    .send {
        font-size: 13px;
        color: gray;
        display: inline-block;
        padding-top: 6px;
        margin-left: 7px;
    }

    .last {
        display: flex;
        justify-content: space-between;
    }

    .name1 {
        margin-left: 1vw;
    }

    .yoho {
        display: inline-block;
        border: 0.1px #CC6633 solid;
        font-size: 10px;
        border-radius: 2px;
        margin-left: 4vw;
    }

    .type1 {
        color: gray;
        font-size: 11px;
        margin-left: 1vw;
    }

    .price1 {
        margin-top: 0;
        margin-bottom: 0;
        margin-top: 20px;
        color: red;
    }

    #rmb {
        color: red;
        font-size: 14px;
    }
    #rmb span{
        font-size: 12px;
    }

    .class {
        color: red;
        text-align: center;
    }

    .tubiao {
        margin-top: 1.5vh;
        ;
        margin-bottom: 0;
        margin-left: 7vw;
        font-size: 14px;
        color: red;
    }

    .fx {
        display: flex;
        justify-content: space-between;
    }

    .fenxiang {
        display: block;
        margin: 0 3vw;
        font-size: 12px;
        color: gray;
    }

    .content1 {
        display: block;
        margin-left: 4px;
        padding: 10px 0;
        width: 60vw;
        font-size: 14px;
    }

    #fanhui {
        border: none;
        background-color: #CC6633;
        font-size: 22px;
        padding-top: 0.5vh;
    }
    #r1{
        font-size: 16px;
        font-weight: 900;
        color: #999;
        margin-left: 10px;
        margin-top: 15px;
    }
    #r2{
        font-size: 14px;
        color: #999;
        margin-left: 10px;
    }
    #r3{
        font-size: 22px;
        color: #999;
        margin-top: 10px;
        margin-left: 13px;
    }
    #r4{
        font-size: 14px;
        color: #999;
        margin-top: 20px;
        margin-left: 10px;
    }
    #baby{
        color: #999;
    }
</style>